<div id="app">
    <admin-page-header>
        <bi-button type="primary" icon="fa-plus" v-power:admin.user.edit  @click="$go({action:'edit'})">添加管理员</bi-button>
        <bi-button type="light" icon="fa-users" v-power:admin.user.group  @click="$go({action:'group'})">分组管理</bi-button>
    </admin-page-header>

    <div class="container">
        <div class="row">
            <div class="col-12">
                <bi-card title="搜索" style="margin-bottom:var(--box-margin-bottom);">
                    <div class="row g-2">
                        <div class="col-12 col-sm-12 col-lg-3">
                            <admin-user-group power="manage" v-model="search.group_id"  super placeholder="请选择分组" ></admin-user-group>
                        </div>
                        <div class="col-12 col-sm-12 col-lg-3">
                            <bi-select v-model="search.status"  placeholder="请选择状态" >
                                <bi-select-option value="normal" label="正常"></bi-select-option>
                                <bi-select-option value="new" label="新用户"></bi-select-option>
                                <bi-select-option value="disabled" label="禁用"></bi-select-option>
                            </bi-select>
                        </div>
                        <div class="col-12 col-sm-12 col-lg-6">
                            <bi-input v-model="search.keyword"  placeholder="请输入用户名/昵称" icon="fa fa-search" ></bi-input>
                        </div>
                    </div>
                </bi-card>

                <bi-card title="用户列表">
                    <bi-table checkbox :data="list" :loading="loading">
                        <bi-table-column label="" name="status" width="30" v-slot="{row}">
                            <bi-icon :data="statusIcon(row.status)" :class="statusClass(row.status)" style="font-size: 16px;"></bi-icon>
                        </bi-table-column>  
                        <bi-table-column label="用户名" name="username" width="100"></bi-table-column>
                        <bi-table-column label="昵称" name="nickname" ></bi-table-column>
                        <bi-table-column label="管理" width="100"  v-slot="{row}">
                             <bi-menu v-if="row.power != 'ALL' && row.user_id != this.$user.id">
                                <template #handle>
                                    <bi-button class="dropdown-toggle" size="small">管理</bi-button>
                                </template>
                                <bi-menu-item label="编辑" v-power:admin.user.edit  @click="$go({action:'edit',gets:{id:row.user_id}})" ></bi-menu-item>
                                <bi-menu-item label="日志"  v-power:admin.user.log   @click="$go({action:'log',gets:{id:row.user_id}})"></bi-menu-item>
                                <bi-menu-item label="禁用" v-power:admin.user.status  @click="setStatus([row.user_id],'禁用','disabled')" v-if="row.status!='disabled'"  ></bi-menu-item>
                                <bi-menu-item label="恢复" v-power:admin.user.status  @click="setStatus([row.user_id],'恢复','normal')" v-if="row.status=='disabled'" ></bi-menu-item>
                                <bi-menu-item label="重置密码" v-power:admin.user.resetPassword  @click="resetPassword(row)" v-if="row.status!='disabled'" ></bi-menu-item>
                                <bi-menu-item label="删除"  v-power:admin.user.del  @click="deleteUser(row)"  ></bi-menu-item>
                            </bi-menu>
                        </bi-table-column>
                    </bi-table>

                    <template #footer>
                        <bi-pagination v-model="page" :total="total" :count="count" ></bi-pagination>
                    </template>
                </bi-card>
            </div>
        </div>
    </div>
</div>


<script>
import resetPasswordDialog from 'user/reset-password-dialog.vue';
import {debounce} from '@@/admin/assets/js/global.js';

let app = admin.createApp({
    components:{
    },
    data(){

        let search= {
            group_id:'',
            status:'',
            keyword:'',
        }
        
        search  = this.$assign(search,this.$status.get('search'));
        
        return {
            search,
            list:[],
            loading:false,
            page:this.$status.get('page')??1,
            total:0,
            count:0
        }
    },
    watch:{
        search:{
            handler:debounce(function(val){
                
                this.page = 1;
                this.flash();
            },1000),
            deep:true
        },
        page(val){
            this.flash();
        }        
    },
    methods:{
        test(row){
            console.log(row.user_id ,this.$user.id,row.user_id == this.$user.id);
        },
        statusIcon(status){
            switch(status){
                case 'normal':
                    return 'fa-check-circle';
                case 'disabled':
                    return 'fa-times-circle';
                case 'new':
                    return 'fa-check-circle';
            }
        },
        statusClass(status){
            switch(status){
                case 'normal':
                    return 'text-success';
                case 'disabled':
                    return 'text-danger';
                default:
                    return 'text-info';
            }
        },
        flash(){
            this.loading = true;

            this.$status.set('page',this.page);
            this.$status.set('search',this.search);

            this.$ajax({
                url:this.$url({action:'list'}),
                data:{
                    page_current:this.page,
                    ...this.search
                },
                success:(res)=>{
                     
                    this.list = res.list;
                    this.count  = res.count;
                    this.total =res.total;
                },
                over:()=>{
                    this.loading = false;
                }
            })
        },
        resetPassword(row){
            this.$dialog({
                type:'vue',
                content:admin.createApp(resetPasswordDialog,{user_id:row.user_id}),
                callback:()=>{
                    this.flash();
                }
            })
        },
        deleteUser(row){
            this.$confirm({text:'确定删除管理员吗',type:"info"},()=>{
                this.$ajax({
                    url:this.$url({action:'del'}),
                    data:{
                        user_id:row.user_id
                    },
                    success:(res)=>{
                        this.$toast({text:'删除成功',type:'success'},()=>{
                            this.flash();
                        });
                    }
                })
            });
        },
        setStatus(users,title,status){
            this.$confirm({text:'确定'+title+'管理员吗',type:"info"},()=>{
                this.$ajax({
                    url:this.$url({action:'status'}),
                    data:{
                        status,
                        users
                    },
                    success:(res)=>{
                        this.$toast({text:'设置成功',type:'success'},()=>{
                            this.flash();
                        });
                    }
                })
            });
        }
    },
    updated(){
        console.log('dd');
    },
    mounted(){
        this.flash();
    }
}).mount('#app');

</script>